<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2022-03-02 
 -->


<template>
  <div class="h-full">
    <!-- <stackedBar></stackedBar> -->
    <div class="h-full" id="dataChartLine"></div>
  </div>
</template>

<script>
 import stackedBar from '@/components/stackedBar'
 import * as echarts from "echarts";
export default {
  name: "Chart",
  components: {stackedBar},
  data() {
    return {
      chart: {
        radioBtn: "WEEK",
        dataChartLine: null,
        alarmChartLine: null,
        alarmType:[],
        alarmLevel:[],
      },
      colorList: [
        { c1: "#f4e54c", c2: "#fec62a" },
        { c1: "#01c3e9", c2: "#73c35f" },
        { c1: "#018bf4", c2: "#4283f4" },
      ],
    };
  },

  mounted() {
    this.initData();
    this.initChart(this.chart.alarmType);
  },

  methods: {
    initData() {
    this.chart.alarmLevel = [
        {"tag": 1, "amount": 1, "proportion": 0.14285714285714285},
        {"tag": 2, "amount": 2, "proportion": 0.8571428571428571},
        {"tag": 3, "amount": 0, "proportion": 0.0}
      ].map(item => ({name: this.level(item.tag-1), value: item.proportion.toFixed(1) }));
    this.chart.alarmType = [
        {"tag": 1, "amount": 6, "proportion": 0.8571428571428571},
        {"tag": 2, "amount": 2, "proportion": 0.0},
        {"tag": 3, "amount": 1, "proportion": 0.14285714285714285}
      ].map(item => ({name: this.alarmType(item.tag), value: item.proportion.toFixed(1), data: item.amount}))
    },
    initChart(data) {
      const font_size = document.getElementById("dataChartLine").offsetWidth / 100 * 3.6;
      if (data.length) {
        if (this.chart.dataChartLine != null) this.chart.dataChartLine.dispose();
        this.chart.dataChartLine = echarts.init(document.getElementById("dataChartLine"));
        this.chart.dataChartLine.showLoading({ text: "", color: "#ffffff", textColor: "#8a8e91", maskColor: "rgba(255, 255, 255, 0.8)" });
      }
      this.chart.dataChartLine = echarts.init(document.getElementById("dataChartLine"));
      const label = data.map((v, i) => ( {type: 'text', cursor: 'auto', top: 22 * (i+1), left: 20, style: { text: `· ${v.name}占比：`, fill: this.colorList[i].c2,font: '13px "STHeiti", sans-serif, bold', textHeight: 35, textLineHeight: 35}}));
      const value = data.map((v, i) => ( {type: 'text', cursor: 'auto', top: 22 * (i+1), left: 135, style: { text: v.value+"%", fill: this.colorList[i].c2, textHeight: 35, textLineHeight: 35}}));
      const option = {
        legend: { bottom: 20, right: 50 },
        grid: {top: '25%', left: '2%', right: "30%", bottom: '3%', containLabel: true},
        graphic: [
        {
          type: 'group', top: 30, right: 5, children: [
            {
              type: 'rect',
              top: 15,
              shape: { r: [0, 0, 0, 0], width: 180, height: 21 * (label.length + 1) + 10 },
              cursor: 'auto',
              style: { fill: "#fff", lineWidth: 0.5, shadowBlur: 8, shadowOffsetX: 1, shadowOffsetY: 1, shadowColor: 'rgba(0,0,0,0.3)' }
            },
            ...label,
            ...value,
          ]
        },
        {
          type: 'group', top: "45%", left: "47%", children: [
          {
            type: 'text', cursor: 'auto', top: 0, left: 0, style: { text: "类型", fill: "#6f6c6e", textHeight: 35, textLineHeight: 35, font: `${font_size / 1.5}px "STHeiti", sans-serif, bold`}
          }
        ] }
        ],
        tooltip: { trigger: 'item', axisPointer: { type: 'shadow' }, formatter: (param) => {
          const { marker, name, value, data, color} = param;
          return `
            ${marker} <span style="color: ${color}">${name}类型：${data.data} 条</span></br>
            ${marker} <span style="color: ${color}">${name}占比${value}%</span></br>
            `
        } },
        series: {
          type: "pie", data, label: { show: true, formatter: (arg) => arg.name + arg.data.data + "条" },
          radius: ["50%", "70%"],
          center: ["50%", "45%"],
          selectedMode: "multiple",
          itemStyle: {normal: { color: (arg) => new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: this.colorList[arg.dataIndex].c1, }, { offset: 1, color: this.colorList[arg.dataIndex].c2, }]), },},
        },
      };
      this.chart.dataChartLine.hideLoading();
      this.chart.dataChartLine.setOption(option);
      window.addEventListener("resize", this.chart.dataChartLine.resize)
    },
    level (level) {
      if (level === '0' || level === 0) return "一般";
      if (level === '1' || level === 1) return "重要";
      if (level === '2' || level === 2) return "严重";
      return level;
    },
    alarmType(num) {
      if (Number(num) === 1) return "超时时间";
      if (Number(num) === 2) return "自定义";
      if (Number(num) === 3) return "状态码";
    },
  },
  //  End
};
</script>

<style lang='css' scoped>
</style>
